<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" @click="tabClick" :activeStyle="activeStyle" lineColor="#675f91" :current="current">
				<view slot="right" style="padding-right: 10px;">
					<view class="flex">
						<u-button type="primary" size="small" text="入库" @click="warehousing"
							v-if="current == 0 && isShowWarehousingBtn"></u-button>
						<u-button type="primary" size="small" text="出库" @click="stockOut"
							v-if="current == 1 && isShowStockOutBtn"></u-button>
					</view>
				</view>
			</u-tabs>
			<view class="flex bg-gray">
				<template v-for="col in tabs[current].tableHd">
					<view class="col-item font-24" :style="[col.style]">
						{{col.title}}
					</view>
				</template>
			</view>
		</u-sticky>
		<nodata v-if="loadingStatus == 'end' && list.length == 0"></nodata>
		<view class="bgw">
			<view class="">
				<template v-for="(v,i) in list">
					<view class="flex">
						<template v-for="col in tabs[current].tableHd">
							<view class="col-item" v-if="col.isArry" :style="[col.style]">
								{{ v[col.key] ? v[col.key][1] : '' }}
							</view>
							<view class="col-item" v-else-if="col.key == 'date'" :style="[col.style]">
								{{ v[col.key]|filterDate2}}
							</view>
							<view class="col-item" v-else :style="[col.style]">
								{{ v[col.key] }}
							</view>
						</template>
					</view>
					<u-line dashed></u-line>
				</template>
			</view>
		</view>

		<view class="blank"></view>
		<view class="fixed-bottom bgw">
			<u-line></u-line>
			<view class="flex">
				<template v-for="col in tabs[current].tableHd">
					<view class="col-item" :style="[col.style]">
						<text class="text-gray" v-if="col.key == 'date'">汇总</text>
						<text class="font-bold" v-if="col.key == 'purchase_unit_qty'">{{sum_purchase_unit_qty}}</text>
						<text class="font-bold" v-if="col.key == 'purchase_unit_id'">{{sum_purchase_unit_id}}</text>
						<text class="font-bold" v-if="col.key == 'actual_main_qty'">{{sum_actual_main_qty}}</text>
						<text class="font-bold" v-if="col.key == 'actual_out_cost_exclude_expense'">{{sum_actual_out_cost_exclude_expense}}</text>
						<text class="font-bold" v-if="col.key == 'main_unit_id'">{{sum_main_unit_id}}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		stock_in_out_detail_one_material
	} from "@c/api.js";
	import nodata from '@/components/nodata.vue';
	export default {
		components: {
			nodata
		},
		data() {
			return {
				stockId: 0,
				id: 0,
				name: '',
				current: 0,
				titleStyle: {
					color: "#ffffff",
				},
				bgColor: "#675f91",
				activeStyle: {
					color: "#675f91",
				},
				tableHd0Config: {
					date: {
						title: "日期",
						key: 'date',
						span: 2,
						style: {
							flex: 1,
							'min-width': '180rpx'
						}
					},
					purchase_unit_qty: {
						title: "数量",
						key: 'purchase_unit_qty',
						span: 2,
						style: {
							'text-align': 'right',
							width: '120rpx',
						}
					},
					purchase_unit_id: {
						title: "单位",
						key: 'purchase_unit_id',
						isArry: true,
						style: {
							width: '120rpx',
						}
					},
					purchase_unit_price: {
						title: "单价",
						key: 'purchase_unit_price',
						style: {
							'text-align': 'right',
							width: '120rpx',
						}
					},
					msupplier_id: {
						title: "供应商",
						key: 'msupplier_id',
						isArry: true,
						style: {
							flex: 1,
							'min-width': '180rpx'
						}
					},
				},
				tabs: [{
						name: "入库",
						id: 1,
						tableHd: [],
					},
					{
						name: "出库",
						id: 1,
						tableHd: [{
								title: "日期",
								key: 'date',
								style: {
									flex: 1,
									'min-width': '180rpx'
								}
							},
							{
								title: "数量",
								key: 'actual_main_qty',
								span: 3,
								style: {
									width: '120rpx',
									'text-align': 'right',
								}
							},
							{
								title: "单位",
								key: "main_unit_id",
								isArry: true,
								style: {
									width: '120rpx',
								}
							},
							{
								title: "出库成本",
								key: 'actual_out_cost_exclude_expense',
								span: 3,
								style: {
									width: '200rpx',
								}
							},
							// {
							// 	title: "方式",
							// 	key:'type',
							// 	span: 4,
							// },
						],
					},
				],
				one_material_stock_in_detail_list: [],
				one_material_stock_out_detail_list: [],
				list: [],
				isShowWarehousingBtn: false,
				isShowStockOutBtn: false,
			};
		},
		filters: {
			filterDate2(value) {
				return value;
				let arr = value.split('-');
				return arr[1] + '-' + arr[2];
			}
		},
		computed:{
			sum_purchase_unit_qty(){
				let num = 0;
				this.list.forEach(v=>{
					num += v.purchase_unit_qty
				});
				return num
			},
			sum_purchase_unit_id(){
				if(this.list.length>0){
					return this.list[0].purchase_unit_id[1]
				}
				return ''
			},
			sum_main_unit_id(){
				if(this.list.length>0){
					return this.list[0].main_unit_id[1]
				}
				return ''
			},
			sum_actual_main_qty(){
				let num = 0;
				this.list.forEach(v=>{
					num += v.actual_main_qty
				});
				return num
			},
			sum_actual_out_cost_exclude_expense(){
				let num = 0;
				this.list.forEach(v=>{
					num += v.actual_out_cost_exclude_expense
				});
				return num
			}
		},
		methods: {
			warehousing() {
				let bagList = [{
					id: this.id,
					value: 1,
					name: this.name
				}];
				this.nav('/warehousingFood/warehousingFood?bagList=' + JSON.stringify(bagList) + '&from=stockDetail')
			},
			stockOut() {
				let bagList = [{
					id: this.id,
					value: 1,
					name: this.name
				}];
				this.nav('/stockOutFood/stockOutFood?bagList=' + JSON.stringify(bagList) + '&from=stockDetail')
			},
			tabClick(e) {
				// console.log(e);
				// console.log(this.current);
				this.current = e.index;
				this.list = this.sort_list(this.current == 0 ? this.one_material_stock_in_detail_list : this
					.one_material_stock_out_detail_list);
			},
			sort_list(list) {
				list = list.sort((a, b) => {
					let a_time = new Date(a.date).getTime();
					let b_time = new Date(b.date).getTime();
					return b_time - a_time;
					// return a_time - b_time;
				});
				return list;
			},
			getData() {
				uni.showLoading({
					title: "加载中",
				});
				this.loadingStatus = 'loading';
				stock_in_out_detail_one_material({
					material_id: this.id
				}).then((res) => {
					let {
						one_material_stock_in_detail_list,
						one_material_stock_out_detail_list
					} = res.result;
					let fn_list = one_material_stock_in_detail_list.fn_list || [];
					let tableHd0 = [];
					fn_list.forEach(v => {
						if (this.tableHd0Config[v]) {
							tableHd0.push(this.tableHd0Config[v]);
						}
					})
					this.tabs[0].tableHd = tableHd0;

					this.one_material_stock_in_detail_list = one_material_stock_in_detail_list.slist;
					this.one_material_stock_out_detail_list = one_material_stock_out_detail_list;
					this.list = this.sort_list(this.current == 0 ? this.one_material_stock_in_detail_list : this
						.one_material_stock_out_detail_list);
					this.loadingStatus = 'end';

				}).finally(() => {
					this.loadingStatus = 'end';
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
		},
		onLoad(o) {
			try {
				this.role = this.$store.getters.get_role;
				let stockAuth = this.role['仓管模块'];
				// console.log(stockAuth);
				this.isShowWarehousingBtn = stockAuth['出库'].write || stockAuth['出库申请'].write;
				this.isShowStockOutBtn = stockAuth['出库'].write;
			} catch (e) {}

			this.id = Number(o.id) || 361103;
			this.name = o.name || '四格菜盒测试';
			this.stockId = Number(o.stockId) || 336329;
			this.getData();
		},
		onShow() {
			uni.$off('refresh_stockDetail');
			uni.$once('refresh_stockDetail', () => {
				this.getData();
				uni.$emit('refresh_stock');
			})
		},
		onReady() {
			let name = this.name;
			uni.setNavigationBarTitle({
				title: `【${name}】出入库明细`,
			});
		},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style>
	.blank {
		height: 100upx;
	}

	.col-item {
		padding: 20upx 10upx;
		text-align: center;
	}
</style>